<template>
  <div class="ship-detail-container">
    <div class="ship-detail-common">
      <div class="tab-container">
        <ul>
          <li :class="['tab-item', currentIdx == 0 ? 'active' : '']" @click="toggle(0)">
            船舶动态
          </li>
          <!-- <li :class="['tab-item', currentIdx == 1 ? 'active' : '']" @click="toggle(1)">气象</li>
          <li :class="['tab-item', currentIdx == 2 ? 'active' : '']" @click="toggle(2)">航次</li> -->
        </ul>

        <div class="close-icon" @click="closeModal">
          <img src="~@/assets/images/map/close.png" alt="">
        </div>
      </div>

      <div class="main-ship-detail">
        <div v-if="currentIdx == 0">
          <div class="top-info">
            <div class="flex space-between">
              <div class="ship-detail">
                <div class="flag-container">
                  <span :class="['fi',`fi-${shipDetail.flag}`, 'flag']"></span>
                  <div>
                    <div class="shipName-txt">{{ shipDetail.shipName }}</div>
                    <div class="shipName-txt" style="margin-top: 8px">{{ shipDetail.enName }}</div>
                    
                  </div>
                </div>
              </div>
              <div class="ship-pic">
                <img v-if="shipDetail.shipPhoto" :src="$handleMinioUrl(shipDetail.shipPhoto)" alt="">
              </div>
            </div>
            <div style="margin-top: 10px" class="flex time-flex">
              <span
                >更新时间：{{ shipDetail.updateMinute }}</span
              >
              <span v-if="shipDetail.source">来自：{{
                  shipDetail.source
                }}</span>
            </div>
            <div v-if="shipDetail.tenantName" style="margin-top: 10px">
              <span >所属船企：{{
                  shipDetail.tenantName
                }}</span>
            </div>
          </div>
          <div class="center-info">
            <div class="center-info-item">
              <div class="field">
                <span class="field-name">MMSI：</span>
                <span class="field-val">{{ shipDetail.mmsi || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">IMO：</span>
                <span class="field-val">{{ shipDetail.imo || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">呼号：</span>
                <span class="field-val">{{ shipDetail.callSign || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">类型：</span>
                <span class="field-val">{{ shipDetail.shipType || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">船长：</span>
                <span class="field-val">{{ shipDetail.length || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">船宽：</span>
                <span class="field-val">{{ shipDetail.width || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">吃水：</span>
                <span class="field-val">{{ shipDetail.draft || "--" }}</span>
              </div>
            </div>
            <div class="center-info-item">
              <div class="field">
                <span class="field-name">状态：</span>
                <span class="field-val">{{
                  getVoyageStatus(shipDetail.voyageStatus)
                }}</span>
              </div>
              <div class="field">
                <span class="field-name">航向：</span>
                <span class="field-val">{{ shipDetail.course || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">航速：</span>
                <span class="field-val">{{ shipDetail.speed || "--" }}</span>
              </div>
              <div class="field">
                <span class="field-name">纬度：</span>
                <span class="field-val">{{ shipDetail.latitude || "--" }} {{ shipDetail.latitude && (shipDetail.latitude > 0 ? "N" : "S") }}</span>
              </div>
              <div class="field">
                <span class="field-name">经度：</span>
                <span class="field-val">{{ shipDetail.longitude || "--" }} {{ shipDetail.longitude && (shipDetail.longitude > 0 ? "E" : "W") }}</span>
              </div>
              <div class="field">
                <span class="field-name">目的港：</span>
                <span class="field-val">{{
                  shipDetail.destinationPort || "--"
                }}</span>
              </div>
              <div class="field">
                <span class="field-name">预到时间：</span>
                <span class="field-val">{{
                  shipDetail.voyagePlanEndTime || "--"
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-if="currentIdx == 1" class="tianqi">
          <img src="~@/assets/images/map/tianqi.png" alt="">

          <div style="text-align: center">
            <span>即将上线，敬请期待...</span>
          </div>
        </div> -->
        <!-- <div v-if="currentIdx == 2">
          <div class="top-info">
            <div class="flex space-between">
              <div class="ship-detail">
                <div class="flag-container">
                  <span :class="['fi',`fi-${shipDetail.flag}`, 'flag']"></span>
                  <div>
                    <div class="shipName-txt">{{ shipDetail.shipName }}</div>
                    <div class="shipName-txt" style="margin-top: 8px">{{ shipDetail.enName }}</div>
                  </div>
                </div>
              </div>
              <div class="ship-pic">
                <img v-if="shipDetail.shipPhoto" :src="$handleMinioUrl(shipDetail.shipPhoto)" alt="">
              </div>
            </div>
            <div style="margin-top: 10px" class="flex time-flex">
              <span
                >更新时间：{{ shipDetail.updateMinute }}</span
              >
              <span v-if="shipDetail.source">来自：{{
                  shipDetail.source
                }}</span>
            </div>
          </div>
          <div class="voyage-info-box">
            <VoyageInfo :voyage-info="currentVoyage"></VoyageInfo>
          </div>
        </div> -->
      </div>

      <div class="button-list">
        
        <!-- <span @click="btnClick('hc')">航次</span> -->
        <span @click="btnClick('gj')">轨迹</span>
        <!-- <span @click="btnClick('dangan')">船舶档案</span> -->
        <el-badge v-if="warnCount > 0" is-dot>
          <span @click="btnClick('shipWarn')">船舶告警</span>
        </el-badge>
        <span v-else @click="btnClick('shipWarn')">船舶告警</span>

      </div>
    </div>
  </div>
</template>
<script>
import { cancelShipFavor } from "@/api/shipGroup";
import { getShipInfoDetail,getVideoWarnList } from "@/api/ship";
import * as echarts from "echarts";
import VoyageInfo from "./VoyageInfo.vue"

const shipFlag = {
  "中国": 'cn',
  "安提瓜和巴布达": 'ag',
  "巴哈马": 'bs',
  "百慕大群岛": 'bm',
  "开曼群岛": 'ky',
  "塞浦路斯": 'cy',
  "直布罗陀": 'gi',
  "洪都拉斯": 'hn',
  "黎巴嫩": 'lb',
  "利比里亚": 'lr',
  "马耳他": 'mt',
  "马绍尔群岛": 'mh',
  "巴拿马": 'pa',
  "圣文森特": 'vc',
  "斯里兰卡": 'lk',
  "瓦努阿图": 'vu',
  "荷属安的列斯群岛": 'bq'
}

export default {
  components: {
    VoyageInfo
  },
  props: {
    shipInfo: {
      type: Object,
    },
    currentVoyage: {
      type: Object,
    }
  },

  data() {
    return {
      isMoreShow: false,
      currentTab: "zccy",
      chartCrew: undefined,
      chartCertificate: undefined,
      currentIdx: 0,

      shipDetail: {},
      shipOilInfo: {
        oilTankInfo: [],
      },
      shipCrewNum: undefined,
      updateShipDataInterval: null,
      warnCount:0,
    };
  },
  
  watch: {
    shipInfo: {
      handler: function (val, oldVal) {
        if (val && oldVal && oldVal.shipId && val.shipId != oldVal.shipId) {
          this.loadData();
        }
      },

      deep: true,
    },
  },
  mounted() {
    this.loadData();

    // 开启详情数据刷新，30秒刷一次
    this.updateShipDataInterval = setInterval(() => {
      if (this.updateShipDetailInfo) {
        this.updateShipDetailInfo();
      }
    }, 1000 * 30);
  },
  destroyed() {
    // 组件销毁，清除interval
    this.updateShipDataInterval && clearInterval(this.updateShipDataInterval)
  },
  methods: {
    toggle(idx) {
      this.currentIdx = idx;
      if (idx == 2) {
        this.$emit("update-voyage-info")
      }
    },
    loadData() {
      this.updateShipDetailInfo();
      this.updateWaringInfo();
    },
    // 更新船舶告警信息
    updateWaringInfo(){
      
      getVideoWarnList({shipId:this.shipInfo.shipId,warningFlag:true,}).then(res=>{
        if(res.result && res.result.length > 0){
          this.warnCount = res.result.length
        }else{
          this.warnCount = 0;
        }
      })
    },
    // 更新船舶详细信息
    updateShipDetailInfo() {
      // const tester = {
      //   tenantId: "1593133915812065282",
      //   shipId: "1593134439886155778",
      //   shipName: "船端登录勿动",
      //   imo: "221122121",
      //   callSign: "221122121",
      //   mmsi: "221122121",
      //   shipType: null,
      //   length: "12",
      //   width: "21",
      //   draft: "33",
      //   voyageStatus: "0",
      //   longitude: null,
      //   latitude: null,
      //   speed: null,
      //   course: null,
      //   destinationPort: null,
      //   voyagePlanEndTime: null,
      //   source: null,
      //   updateMinute: null,
      // };
      getShipInfoDetail(this.shipInfo.tenantId, this.shipInfo.shipId).then(
        (res) => {
          if (res.result) {
            res.result.length =
              res.result.length || res.result.length == 0
                ? res.result.length + "米"
                : "";
            res.result.width =
              res.result.width || res.result.width == 0
                ? res.result.width + "米"
                : "";
            res.result.draft =
              res.result.draft || res.result.draft == 0
                ? res.result.draft + "米"
                : "";
            res.result.speed =
              res.result.speed || res.result.speed == 0
                ? res.result.speed + "节"
                : "";
            res.result.course =
              res.result.course || res.result.course == 0
                ? res.result.course + "°"
                : "";
            res.result.source = res.result.source == "0" ? "移动网络" : "卫星";

            // 国旗数据, 默认cn
            // if (res.result.shipBirth) {
              res.result.flag = shipFlag[res.result.shipBirth] || 'cn'
            // }
            this.shipDetail = res.result;
          }
        }
      );
    },
    switchLoadMore() {
      this.isMoreShow = !this.isMoreShow;
    },
    // 取消关注船舶
    cancelFavor() {
      if (this.shipInfo) {
        cancelShipFavor(this.shipInfo.shipId).then((res) => {
          if (res.success) {
            this.$message.success("取消关注船舶成功！");
          } else {
            this.$message.warning("取消关注船舶失败！");
          }
        });
      }
    },
    btnClick(btnCode) {
      // if (btnCode === "qxgz") {
      //   this.cancelFavor();
      // }
      if(btnCode == "shipWarn"){
        if(this.warnCount == 0){
          this.$message.warning("当前船舶没有告警信息！")
          return
        }
      }
      this.$emit("btn-click", btnCode);
    },

    // 获取航行状态描述  0 在航 2 靠泊 1 锚泊
    getVoyageStatus(voyageStatus) {
      let statusText = "";
      switch (voyageStatus) {
        case "0":
          statusText = "在航";
          break;
        case "2":
          statusText = "靠泊";
          break;
        case "1":
          statusText = "锚泊";
          break;

        default:
          statusText = "--";
          break;
      }

      return statusText;
    },
    closeModal() {
      this.$emit("btn-click", 'close');
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-badge__content.is-fixed.is-dot{
  right: 15px;
  width:12px;
  height:12px;
}
.space-between {
  justify-content: space-between;
}
.ship-detail-container {
  max-height: 580px;
  overflow-y: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar-track-piece {
    // background: #d3dce6;
    background: #ffffff;
  }
  &::-webkit-scrollbar-thumb {
    background: #ebeef5;
    border-radius: 20px;
    border-radius: 20px;
  }
  &::-webkit-scrollbar {
    width: 4px;
    height: 10px;
  }

  .tab-container {
    border-bottom: 1px solid #d8d8d8;
    padding: 12px 13px 0;
    position: relative;
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      display: inline-block;
    }

    .close-icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: 15px;
      img {
        width: 100%;
      }
    }

    .tab-item {
      width: 60px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border-radius: 3px 3px 0px 0px;
      cursor: pointer;
      margin-bottom: -1px;
      margin-right: 20px;

      &.active {
        font-weight: bold;
        color: #004aaa;
        border-bottom: 2px solid #004aaa;
        // border: 1px solid #004aaa;
        // border-bottom: unset;
        // background: #e0edff;
      }
    }
  }

  .tianqi {
    padding: 30px 60px;
    border-bottom: 1px solid #d8d8d8;
    img {
      width: 100%;
    }
  }

  .voyage-info-box {
    padding: 20px 0;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
  }

  .ship-detail-common {
    width: 100%;
    position: relative;
    // padding: 9px 9px 0 9px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .top-info {
      padding: 10px 14px 11px 14px;
      font-size: 14px;

      font-weight: 400;
      color: #333333;
      // display: flex;
      // justify-content: space-between;

      .shipName-txt {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #004AAA;
        // line-height: 22px;
        margin-left: 20px;
      }

      .time-flex {
        span:last-child {
          margin-left: 60px;
        }
      }

      .flag-container {
        display: flex;
        align-items: center;
      }

      .flag {
        width: 40px;
        height: 30px;
      }

      .ship-pic {
        width: 113px;
        height: 67px;
        // background-color: #f5f5ff;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .center-info {
      display: grid;
      padding: 0px 0 8px 0;
      border-top: 1px solid #d8d8d8;
      border-bottom: 1px solid #d8d8d8;
      grid-template-columns: 50% 50%;
      .field {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        font-size: 14px;
        font-weight: 400;
        color: #333333;

        &-name {
          width: 71px;
          text-align: right;
        }
      }
    }
    .button-list {
      padding: 8px 10px;
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill, 80px);
      grid-gap: 10px;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      // flex-wrap: wrap;
      span {
        display: inline-block;
        width: 70px;
        height: 28px;
        background: #004aaa;
        border-radius: 3px;
        border: 1px solid #004aaa;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}
</style>
